<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
    $(document).ready(function() {
        var fm = ["childForm", "child_container", "childFormId"];
        Page.createForm(fm);
        TempUtil.render('child_template', 'childForm', DOC);
        Page.setStripeTable();
        Page.render('#fwHead', '#fwHead_template');
        Page.render('#fwBody', '#fwBody_template');
        var showText = wirelessconfightml.prompt;
        var $btnAdd = $('#btnAdd'),$btnClose = $('#btnClose'),
            $btnSaveIp = $('#btnSaveIp'),$btnEditIp = $('#btnEditIp'),$box = $('#edit_box'), $mask = $('#mask');

        var editIndex = 0;
          Page.postJSON({
                        json: { cmd: RequestCmd.GET_PING_LIST },
                        success: function(datas) {
                            if(datas.data.dataFlag == true){
                                $("#enableRemoteLogin").prop("checked",true);
                            }else{
                                $("#enableRemoteLogin").prop("checked",false);
                            }
                          createIpListTable(datas.data.pingList);
                        }
                    })

        $btnAdd.click(function () {
            $box.addClass('edit_box').show(); 
            $mask.show();
            $btnSaveIp.show();
            $btnEditIp.hide();
            $('#edit_title').text(DOC.table.add + DOC.lbl.remoteIp);
            SysUtil.setBoxStyle1($box);
        });

        $btnClose.click(function() {
            $box.removeClass('edit_box').hide();
            $mask.hide();
            $('#ipList').val('');
        });

        $btnSaveIp.click(function () {
            var ip = $('#ipList').val().trim().replace(/ /g, '');
            if (ip == "") {
                AlertUtil.alertMsg(CHECK.required.ip);
                return false;
            }

            if (!CheckUtil.checkIp(ip,'')) {
                AlertUtil.alertMsg(CHECK.format.ip);
                return false;
            }

            var sb = String.format('<tr><td>{0}</td><td><a href="javascript:;" class="ipEdit">{1}</a></td><td><a href="javascript:;" class="ipDel">{2}</a></td></tr>',ip, showText.edit,showText.del);
            $("'"+sb+"'").appendTo($('#ipLists table'));
            $box.removeClass('edit_box').hide();
            $mask.hide();
            $('#ipList').val('');
        });
        var $enableRemoteLogin=0;
        $("#btnSave").on("click",function(){
            $('#btnSave').attr("disabled",true);
            var ipArray = new Array();
        var $tr=$("#ipLists table tr");
        for(var i=1;i<$tr.length;i++){
            ipArray.push($($tr[i]).children("td").eq(0).text());
            
        }
        if($("#enableRemoteLogin").prop("checked")){
            enableRemoteLogin = 1;
        }else{
            enableRemoteLogin = 0;
        }
        var json = {};
            json.dataList = ipArray;
            json.pingFlag = enableRemoteLogin;
            json.method = JSONMethod.POST;
            json.cmd = RequestCmd.SET_PING_LIST;
             Page.postJSON({
                json: json,
                success: function(data) {
                    AlertUtil.alertMsg(PROMPT.saving.success);
                },
                complete: function(){
                    $('#btnSave').attr("disabled",false);
                }
            });


        });


        $btnEditIp.click(function () {
            var ip = $('#ipList').val().trim().replace(/ /g, '');
            if (ip == "") {
                AlertUtil.alertMsg(CHECK.required.ip);
                return false;
            }

            if (!CheckUtil.checkIp(ip,'')) {
                AlertUtil.alertMsg(CHECK.format.ip);
                return false;
            }

            $('#ipLists table tr').eq(editIndex).children('td').eq(0).text(ip);
            $box.removeClass('edit_box').hide();
            $mask.hide();
            $('#ipList').val('');

        });

        $(document).on('click','a[class="ipDel"]',function(){
            $(this).parent().parent().remove();
        });

        $(document).on('click','a[class="ipEdit"]',function(){
            $box.addClass('edit_box').show();
            $mask.show();
            $btnSaveIp.hide();
            $btnEditIp.show();
            $('#edit_title').text(DOC.table.edit + DOC.lbl.remoteIp);
            SysUtil.setBoxStyle1($box);
            $('#ipList').val($(this).parent().parent().children('td').eq(0).text());
            editIndex = $('#ipLists table tr').index($(this).parent().parent());
        });

        function createIpListTable(ips) {
            var sb = new StringBuilder();

            sb.append(String.format('<table class="list" cellspacing="0"><tr><th>IP</th><th>{0}</th><th>{1}</th></tr>',
                showText.edit,showText.del));



            for(var i = 0; i < ips.length; i++) {
                if(ips[i] !== ""){
                    sb.append(String.format('<tr><td>{0}</td><td><a href="javascript:;" class="ipEdit">{1}</a></td><td><a href="javascript:;" class="ipDel">{2}</a></td></tr>',ips[i], showText.edit,showText.del));
                }
            }

            sb.append('</table>');

            $('#ipLists').html(sb.toString());
        }
    });
</script>


<div class="tab_boxes" id="child_container">
    <div id="childFormId">
        <script type="text/template" id="child_template">
            <div>
                <!-- <form id="childForm" > -->
                    <table class="detail" cellspacing="0">
                        <tr>
                            <th><%- lbl.pingRemote %><%- colon %></th>
                            <td>
                                <input type="checkbox" id="enableRemoteLogin" name="enableRemoteLogin" /><%- status.enable %>
                            </td>
                        </tr>
                        <tr>
                            <th><%- lbl.pingRemoteIp %><%- colon %></th>
                            <td>
                                <input id="btnAdd" type="button" value="<%- lbl.addRemoteIp %>" />
                                <div id="ipLists"></div>
                            </td>
                        </tr>
                        <tr>
                            <th>&nbsp;</th>
                            <td><input type="button" id="btnSave" value="<%- btn.save %>" /></td>
                        </tr>
                    </table>          
                <!-- </form> -->
            </div>
            <span style="clear:both"></span>
        </script>
    </div>  
</div>

<div id="edit_box" style="display: none;">
    <div class="detail" id="fwHead">
        <script type="text/template" id="fwHead_template">
            <div id="edit_title"></div>
            <div id="edit_close"><input id="btnClose" type="button" value="<%- btn.close %>" /></div>
            <div style="clear:both;"></div>
        </script>
    </div>
    <div id="fwBody">
        <script type="text/template" id="fwBody_template">
            <table class="detail" cellspacing="0">
                <th><%- lbl.remoteIp %><%- colon %></th>
                <td>
                    <input type="text" id="ipList" name="ipList" class="large" maxlength="99" /><span class="cmt"><%- lbl.example %><%- colon %>192.168.2.1</span></span>
                </td>
                <tr>
                    <th>&nbsp;</th>
                    <td>
                        <input type="button" id="btnSaveIp" value="<%- btn.save %>" />
                        <input type="button" id="btnEditIp" value="<%- btn.save %>" />
                    </td>
                </tr>
            </table>
        </script>
    </div>
</div>